<template>
  <!-- 搜索栏 -->
  <div>
    <el-date-picker flex v-model="appObject.search.year" type="year" placeholder="选择年份" />
    <el-input v-model="appObject.search.creator" placeholder="请输入创建者" style="width: 200px; margin-left: 20px" />
    <el-switch v-model="appObject.search.focus" style="margin-left: 20px" active-text="关注" inactive-text="未关注"/>
    <el-button type="primary" style="margin-left: 20px" @click="getAllWGList('focus')">搜索</el-button>
  </div>
  <div style="margin-top: 20px;" v-loading="appObject.loading">
    <el-card class="box-card" v-for="(item, index) in appObject.cardList" style="margin-bottom: 10px;">
      <template #header>
        <div class="card-header">
          <el-row>
            <el-col :span="18"><span>
            <el-button link @click="goToWG(item.id)">{{item.name}}</el-button>
            </span></el-col>
            <el-col :span="6">
              <el-button icon="Star" :type="item.focus ? 'default' : 'warning'" circle style="margin-right: 10px;" @click="focusWG(item)"/>
            </el-col>
          </el-row>
        </div>
      </template>
      <div class="text item">
        <el-row>
          <el-col :span="18"><span>
            {{item.creator}}   {{item.date}}
            <div style="margin-top: 10px;">{{item.description}}</div>
          </span></el-col>
          <el-col :span="6">
            <el-button link>申请加入</el-button>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-pagination small background layout="prev, pager, next" :total="appObject.total" class="mt-4" 
      :page-size="appObject.pagesize" @current-change="handleCurrentChange"/>

  </div>
</template>

<script setup>
  import { reactive } from 'vue'
  
  import { getAllWG } from '../http/wgApi.js'
  import { routeDispatch } from '../http/utils.js'
  
  import userStore from '../store/user.js'
  import {storeToRefs} from 'pinia'
  
  const appObject = reactive({
    search: {
      year: "",
      creator: "",
      focus: false
    },
    cardList :[],
    loading: true,
    pagesize: 3,
    total: 0
  })
  
  getAllWG().then(res => {
    appObject.cardList = res.data.data
    appObject.total = res.data.data.length
    appObject.loading = false
    // 模拟分页
    appObject.cardList = appObject.cardList.slice(0, appObject.pagesize)
    
  })
  
  // 模拟分页
  const handleCurrentChange = (val) => {
    console.log(`current page: ${val}`)    
    getAllWG().then(res => {
      appObject.cardList = res.data.data
      appObject.total = res.data.data.length
      appObject.loading = false
      // 模拟分页
      appObject.cardList = appObject.cardList.slice((val-1)*appObject.pagesize, (val-1)*appObject.pagesize + 3)
      
    })
    
  }
  
  const getAllWGList = (e) => {
    // 以后要根据后台接口获取数据
    appObject.loading = true
    setTimeout(() => {
      appObject.loading = false
    }, 1000 )
  }
  
  const focusWG = (e) => {
    e.focus = !e.focus
  }
  
  const uStore = userStore()
  const { user } = storeToRefs(uStore)
  
  const goToWG = (wgId) => {
    // 根据当前登录人员的类型去不同的页面
    // admin去管理页面
    // 普通员工去wg展示页面
    if(user['_object'].user.position === "admin") {
      routeDispatch('/wgAdmin/' + wgId)
    }else {
      routeDispatch('/wgInfo/' + wgId)
    }
  }
</script>

<style scoped>
  
</style>
